import React from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { badRawData, goodRawData } from '../sampleData.js';
import { calcRiskAll, routedCategory } from '../actions/CalcRiskAction';
import { ModalOpenButton} from '../components/common-ui-parts';
import { clear } from '../actions/CalcRiskAction';
import { agree } from '../actions/ConsentAction'
import LayoutView, { LayoutMode } from '../components/layout/LayoutView'

const BodyDataInput = ({onGoodAction, onBadAction}) => {
  return (
    <LayoutView
      mode={LayoutMode.TOP}
      title="テストデータ入力"
    >
      <div style={{textAlign: 'center'}}>
        <h1>テストデータ入力</h1>
        <ModalOpenButton
          style={{margin:'50px'}}
          label={'悪い値を入力する'}
          onTouchTap={onBadAction}
        />

        <ModalOpenButton
          style={{margin:'50px'}}
          label={'良い値を入力する'}
          onTouchTap={onGoodAction}
        />
      </div>
    </LayoutView>
  );
}

const mapStateToProps = (state, ownProps) => ({
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  onGoodAction: () => {
    dispatch(clear());
    dispatch(agree());
    dispatch(routedCategory(undefined));
    dispatch(calcRiskAll(goodRawData, 17));
    dispatch(push('/report'));
  },
  onBadAction: () => {
    dispatch(clear());
    dispatch(agree());
    dispatch(routedCategory(undefined));
    dispatch(calcRiskAll(badRawData, 17));
    dispatch(push('/report'));
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(BodyDataInput)
